<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击我</button>
    <script>
        let last = performance.now();

        setTimeout(() => {

            console.log(performance.now() - last, 'setTimeout 1')

        }, 18)

        requestAnimationFrame(() => {

            console.log(performance.now() - last, 'requestAnimationFrame 1')

        })
        setTimeout(() => {
            // 生成一个超过 16ms 的长任务
            for (let i = 0; i < 100000000; i++) {
                // 模拟长任务
                if (i === 99999999) {
                    console.log('长任务结束');
                }
            }

            console.log(performance.now() - last, 'setTimeout 2')

        })
        setTimeout(() => {

            console.log(performance.now() - last, 'setTimeout 3')

        })
        setTimeout(() => {

            console.log(performance.now() - last, 'setTimeout 4')

        })
        setTimeout(() => {

            console.log(performance.now() - last, 'setTimeout 5')

        })
        setTimeout(() => {

            console.log(performance.now() - last, 'setTimeout 6')

        })
        requestAnimationFrame(() => {

            console.log(performance.now() - last, 'requestAnimationFrame 2')

        })
        console.log('我爱你')
    </script>
</body>

</html>